<template>
	<el-dialog draggable v-model="dialogShow" :close-on-click-modal="false" width="60%" @close="onClose">
		<el-form ref="formRef" :rules="formRules" :model="formData" size="default" label-width="100px">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="任务名称" prop="Name">
						<el-input v-model="formData.Name" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="执行文件" prop="ClassName">
						<el-select v-model="formData.ClassName" style="width: 100%">
							<el-option v-for="item in classData" :key="item" :value="item" :label="item" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="开始时间" prop="StartTime">
						<el-date-picker v-model="formData.StartTime" clearable style="width: 100%"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="结束时间" prop="EndTime">
						<el-date-picker v-model="formData.EndTime" clearable style="width: 100%"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
					<el-form-item label="任务状态" prop="Status">
						<el-switch v-model="formData.Status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-tooltip class="box-item" effect="dark" content="多个参数以##分割,如:参数1##参数2" placement="right">
						<el-form-item label="执行参数" prop="Param">
							<el-input v-model="formData.Param" clearable></el-input>
						</el-form-item>
					</el-tooltip>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="Cron表达式" prop="Cron">
						<el-input v-model="formData.Cron">
							<template #append>
								<el-button type="primary" @click="showCron = true"> 生成表达式 </el-button>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="任务描述" prop="Remark">
						<el-input v-model="formData.Desc" type="textarea"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onClose" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
			</span>
		</template>
	</el-dialog>
	<el-dialog title="Cron表达式生成器" v-model="showCron" append-to-body destroy-on-close>
		<crontab ref="crontabRef" @hide="showCron = false" @fill="(value:string)=>formData.Cron=value" :expression="formData.Cron"></crontab>
	</el-dialog>
</template>

<script setup lang="ts">
import { Ref, ref,onMounted } from 'vue';
import { Post } from '/@/common/http';
import EMsg from '/@/common/eMsg';
import Crontab from '/@/components/Crontab/index.vue';
const dialogShow = ref(false);

const formRef = ref();
const formRules = ref({
	Name: [{ required: true, message: '任务名称不可为空', trigger: 'blur' }],
	ClassName: [{ required: true, message: '执行文件不可为空', trigger: 'blur' }],
	Cron: [{ required: true, message: 'Cron表达式不可为空', trigger: 'blur' }],
});
const formData = ref({
	Id: 0,
	Name: '',
	GropuName: 'System',
	Desc: '',
	ClassName: '',
	Param: '',
	Cron: '',
	StartTime: '',
	EndTime: '',
	Status: true,
});

const showCron = ref(false);

const classData: Ref<any[]> = ref([]);
const getClass = () => {
	Post('SysData/GetTaskClass', { PageSize: 1000 }, (res: any) => {
		classData.value = res.Data;
	});
};
const onShow = async (id: number) => {
	dialogShow.value = true;
	formData.value.Id = id;
	if (id > 0) {
		Post('SysTask/Get', { Id: id }, (res: any) => {
			formData.value = res.Data;
		});
	}
};
const onClose = () => {
	formRef.value.resetFields();
	dialogShow.value = false;
};
const onSubmit = () => {
	formRef.value.validate((valid: any) => {
		if (valid) {
			if (formData.value.Id > 0) {
				Post('SysTask/Edit', formData.value, (res: any) => {
					EMsg.success(res.Msg);
					onClose();
					emit('refresh');
				});
			} else {
				Post('SysTask/Add', formData.value, (res: any) => {
					EMsg.success(res.Msg);
					onClose();
					emit('refresh');
				});
			}
		}
	});
};
onMounted(()=>{
	getClass();
})
const emit = defineEmits(['refresh']);
defineExpose({
	onShow,
});
</script>
